<template>
  <div class="standard-anime-grid">
    <div v-if="loading" class="loading">
      <p>加载中...</p>
    </div>
    
    <div v-else-if="animes.length === 0" class="no-results">
      <p>{{ emptyMessage || '没有找到符合条件的动漫' }}</p>
      <router-link v-if="emptyActionLink" :to="emptyActionLink" class="action-btn">
        {{ emptyActionText }}
      </router-link>
    </div>
    
    <div v-else>
      <!-- 动漫网格 -->
      <div class="anime-grid">
        <AnimeCard 
          v-for="anime in displayedAnimes" 
          :key="anime.id"
          :anime="anime"
          :show-rank="false"
          :is-featured="false"
          :show-vote-button="showVoteButton"
          :show-nominate-button="showNominateButton"
          :show-favorite-button="showFavoriteButton"
          :show-votes="showVotes"
          :show-favorites-count="showFavoritesCount"
          @vote="handleVote"
          @favorite="handleFavorite"
          @nominate="handleNominate"
          @click="showAnimeDetail"
        />
      </div>
      
      <!-- 分页控制（如果需要） -->
      <div v-if="showPagination" class="pagination">
        <button 
          class="pagination-btn"
          :disabled="currentPage === 1"
          @click="prevPage"
        >
          上一页
        </button>
        
        <div class="pagination-info">
          第 {{ currentPage }} / {{ props.totalPages }} 页
        </div>
        
        <button 
          class="pagination-btn"
          :disabled="currentPage === totalPages"
          @click="nextPage"
        >
          下一页
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, withDefaults, defineProps, defineEmits, watch } from 'vue'
import AnimeCard from './AnimeCard.vue'
import type { Anime } from '../types/anime'

// 定义组件的属性
const props = withDefaults(defineProps<{
  animes: Anime[]
  loading?: boolean
  showPagination?: boolean
  itemsPerPage?: number
  totalPages?: number
  currentPage?: number
  showVoteButton?: boolean
  showNominateButton?: boolean
  showFavoriteButton?: boolean
  showVotes?: boolean
  showFavoritesCount?: boolean
  emptyMessage?: string
  emptyActionText?: string
  emptyActionLink?: string
}>(), {
  loading: false,
  showPagination: true,
  itemsPerPage: 12,
  totalPages: 1,
  currentPage: 1,
  showVoteButton: true,
  showNominateButton: false,
  showFavoriteButton: true,
  showVotes: true,
  showFavoritesCount: true,
  emptyMessage: '没有找到符合条件的动漫'
})

// 定义组件的事件
const emit = defineEmits<{
  vote: [animeId: number]
  favorite: [eventData: number | { animeId: number, isFavorited: boolean }]
  nominate: [anime: Anime]
  'show-detail': [anime: Anime]
  'page-change': [page: number]
}>()

// 内部状态
const currentPage = ref(props.currentPage || 1)

// 监听props中的currentPage变化
watch(() => props.currentPage, (newPage) => {
  if (newPage !== undefined) {
    currentPage.value = newPage
  }
})

const displayedAnimes = computed(() => {
  // 因为后端已经处理了分页，直接返回所有传入的数据
  return props.animes
})

// 监听animes变化，如果外部没有传入currentPage，则重置到第一页
watch(() => props.animes.length, () => {
  if (props.currentPage === undefined) {
    currentPage.value = 1
    emit('page-change', 1)
  }
})

// 处理投票事件 - 直接传递给父组件
const handleVote = (animeId: number) => {
  emit('vote', animeId)
}

// 处理收藏事件
const handleFavorite = (eventData: number | { animeId: number, isFavorited: boolean }) => {
  emit('favorite', eventData)
}

// 处理提名
const handleNominate = (anime: Anime) => {
  emit('nominate', anime)
}

// 显示动漫详情
const showAnimeDetail = (anime: Anime) => {
  emit('show-detail', anime)
}

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    emit('page-change', currentPage.value)
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value < props.totalPages) {
    currentPage.value++
    emit('page-change', currentPage.value)
  }
}

// 提供给父组件的方法
defineExpose({
  resetToFirstPage: () => {
    currentPage.value = 1
  }
})
</script>

<style scoped>
.standard-anime-grid {
  width: 100%;
}

.loading,
.no-results {
  text-align: center;
  padding: 40px 0;
  color: #666;
}

.no-results .action-btn {
  margin-top: 16px;
  display: inline-block;
  padding: 8px 16px;
  background-color: #FF69B4;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.no-results .action-btn:hover {
  background-color: #ff509a;
}

.anime-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
  }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}

.pagination-btn {
  padding: 8px 16px;
  background-color: #FF69B4;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #ff509a;
}

.pagination-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.pagination-info {
  font-size: 0.875rem;
  color: #666;
}

@media (max-width: 768px) {
  .anime-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .pagination {
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .anime-grid {
    grid-template-columns: 1fr;
  }
}
</style>